<!--成员管理 -->
<template>
	<div class="contact flex" id="member">
		<div class="information">
			<div class="topfixed">
				<div class="infosearch marginAuto">
					<el-input class="infosearch-input" @change="getdesigner" v-model="searchtxt" prefix-icon="el-icon-search"
						placeholder="搜索"></el-input>
					<img class="infosearch-add curpoin" @click="addygmsg()" src="@/assets/fun/add.png" alt="添加" />
				</div>
			</div>
			
			<div class="infoblock">
				<div class="infoeach curpoin flex" v-for="(item,index) in infodata" :key="index"
					@click="infosefun(item,index)" :class="infodataac == index ? 'activeinfoeach':''">
					<div class="infoeachl">
						<el-image class="infoeachl-p" :src="apifun.URLimg+item.avatar" fit="cover">
							<div slot="error" class="image-slot">
							    <img class="infoeachl-p" src="@/assets/logosvg.png" alt="头像" />
							</div>
						</el-image>
					</div>
					<div class="infoeachr">
						<p class="infoeachr-name ellipsis01">{{ item.realname }}</p>
						<p class="infoeachr-msg ellipsis01 mainColor">ID：{{ item.mobile }}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="rblock">
			<div class="ointrtitle">成员管理</div>
			<div class="depart flex">
				<div class="departmsg marginAuto" v-if="infodataacdata.mobile">
					<div class="departmsgt flex">
						<div class="departmsgt-head">
							<img style="width:80px;heigt:80px;border-radius: 10px;"  v-if="infodataacdata.avatar" :src="infodataacdata.avatar" alt="头像" />
							<img style="width:80px;heigt:80px;border-radius: 10px;" v-if="!infodataacdata.avatar" src="@/assets/goods.png" alt="头像" />
						</div>
						<div class="departmsgt-msg">
							<div class="departmsgt-msgname">{{ infodataacdata.realname }}</div>
							<div class="departmsgt-msgposi mainColor">ID:{{ infodataacdata.mobile }}</div>
						</div>
					</div>
					<div class="departmsgc flex">
						<div class="departmsgc-each mainColor curpoin" @click="comygmsg()">
							<span class="el-icon-document" style="font-weight:bold;"></span>
							<span style="margin-left:5px;">修改信息</span>
						</div>
						<div class="departmsgc-each curpoin" style="color:#FF0000;" @click="delmember(infodataacdata)">
							<span class="el-icon-delete" style="font-weight:bold;"></span>
							<span style="margin-left:5px;">删除员工</span>
						</div>
					</div>
					<div class="departmsgb">
						<div class="departmsgb-bm">
							<div class="departmsgb-bmeach">手机号：{{ infodataacdata.mobile }}</div>
							<div class="departmsgb-bmeach">部门：{{ infodataacdata.department_name }}</div>
						</div>
						<div class="departmsgb-btn flex marginAuto" v-if="roleId != 5 && roleId != 6 && roleId != 7 && roleId !=8" @click="replacefun(),replaceis = true">
							<el-button class="departmsgb-btneach mainbg" style="color:#fff;border:none;">更换部门</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 更换部门 -->
		<el-dialog  
		  title="更换部门"
		  :visible.sync="replaceis"
		  width="432px"
		  top="140px"
		  :before-close="replaceClosefun"
		  :modal-append-to-body="false">
			<el-select class="replaceisselect" v-model="replacemsg.name" placeholder="请选择" @change="replacemsgelfun" style="width: 100%;height:50px;">
				 <el-option
					v-for="(item,index) in replacedata" :key="index"
					:label="item.name" :value="item.id">
				 </el-option>
		   </el-select>
		   <div class="replacebtn">
			   <el-button class="replacebtneach" style="background-color:#999999;" @click="replaceis=false">取消</el-button>
			   <el-button class="replacebtneach mainbg" @click="replaceenterfun()">提交</el-button>
		   </div>
		</el-dialog>
		<!-- 添加/修改人员 -->
		<el-dialog  
		  :title="eyistype == 1 ? '新增人员':'修改信息'"
		  :visible.sync="eyis"
		  width="432px"
		  top="140px"
		  :before-close="eyClosefun"
		  :modal-append-to-body="false">
			<div class="eyeach flex">
				<p class="eyeachtitle">姓名：</p>
				<div class="eyeachr">
					<el-input v-model="eyname" placeholder="请输入姓名"></el-input>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">手机号：</p>
				<div class="eyeachr">
					<el-input v-model="eyphone" placeholder="请输入登录手机号"></el-input>
				</div>
			</div>
			<div class="eyeach flex">
				<p class="eyeachtitle">所属部门：</p>
				<div class="eyeachr">
					<el-select style="width:100%;" v-model="eymsg.name" placeholder="请选择" @change="eymsgelfun">
						<el-option
							v-for="(item,index) in replacedata" :key="index"
							:label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
		   <div class="replacebtn">
			   <el-button class="replacebtneach" style="background-color:#999999;" @click="eyis=false">取消</el-button>
			   <el-button class="replacebtneach mainbg" @click="eyenterfun()">提交</el-button>
		   </div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				roleId:'',
				searchtxt: '',
				infodata: [],
				infodataacdata:{},
				infodataac: 0,
				replacedata:[],
				replaceis:false,  // 更换部门
				replacemsg:{
					name:'',
					id:''
				},
				eyis:false, // 增加人员
				eyistype:1,   // 1新增 2编辑
				eymsg:{
					name:'',
					id:''
				},
				eyname:'',
				eyphone:''
			}
		},
		mounted() {
			this.roleId = this.$store.state.roleId;
			this.getdesigner()
		},
		methods: {
			// 成员列表---------
			infosefun(item,index) {  // 切换成员列表
				this.infodataac = index;
				this.infodataacdata = item;
			},
			getdesigner(){  // 获取成员
				let sendData = {
					keyword:this.searchtxt
				};
				this.apifun.$post('/pc/order/designer',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						let datas = res.data;
						if(datas.length > 0){
							this.infodata = datas;
							this.infodataacdata = datas[this.infodataac];
						}else{
							this.infodataacdata = {}
						}
					}
				})
			},
			delmember(item){  // 删除成员
				 this.$alert('确认要删除成员吗？', '删除成员', {
					confirmButtonText: '确定',
					closeOnClickModal:true,
					callback: action => {
						if(action == 'confirm'){
							let sendData = {
								user_id : item.user_id
							};
							this.apifun.$post('/pc/Department/designerDel',sendData).then((res)=>{
								// console.log(res)
								if(res.code ==  200){
									let datas = res.data;
									this.infodataacdata = {};
									this.getdesigner()
								}
							})
						}
					}
				});
			},
			replacefun(){  // 获取部门
				let roleId = this.$store.state.roleId;
				let urls= '/pc/Department/saleDepartment'; // 销售部门
				if(roleId == 3 || roleId == 7){
					urls = '/pc/Department/designerDepartment';  // 设计部门
				}
				this.apifun.$post(urls,{}).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						let datas = res.data;
						this.replacedata = datas;
					}
				})
			},
			// 更换部门---------》
			replacemsgelfun(event){  // 选择部门
				this.replacemsg.id = event
			},
			replaceenterfun(){  // 确认更换部门
				let infodataacdata = this.infodataacdata;
				let sendData = {
					user_id:infodataacdata.user_id,
					// mobile:infodataacdata.mobile,
					// realname:infodataacdata.realname,
					department_id:this.replacemsg.id 
				}
				this.apifun.$post('/pc/Department/modifyEmployees',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '操作成功',
							type: 'success'
						});
						this.replaceis = false;
						this.getdesigner()
					}
				})
			},
			
			replaceClosefun(){ // 关闭
				this.replaceis = false;
				this.replacemsg={
					name:'',
					id:''
				};
			},
			// --新增修改人员部分
			eymsgelfun(e){  // 选择人员
				this.eymsg.id = e;
			},
			eyenterfun(){  // 提交
				let sendData = {
					mobile:this.eyphone,
					realname:this.eyname,
					department_id:this.eymsg.id,
					user_id:''
				};
				if(this.eyistype == 2){  // 修改
					sendData.user_id = this.infodataacdata.user_id
				};
				if(this.eyphone == '' || this.eyname == '' || this.eymsg.id == ''){
					this.$message({
						message: '请将信息补充完整',
						type: 'warning'
					});
					return false
				};
				this.apifun.$post('/pc/Department/modifyEmployees',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '操作成功',
							type: 'success'
						});
						this.eyis = false;
						this.getdesigner()
					}
				})
			},
			addygmsg(){ // 添加员工信息
				this.replacefun();
				this.eyis=true;
				this.eyistype=1;
				this.eyphone = '';
				this.eyname = '';
				this.eymsg={
					name:'',
					id:''
				};
			},
			comygmsg(){  // 修改员工信息
				this.replacefun();
				this.eyis=true;
				this.eyistype = 2;
				this.eyphone = this.infodataacdata.mobile;
				this.eyname = this.infodataacdata.realname;
				this.eymsg={
					name:this.infodataacdata.department_name,
					id:this.infodataacdata.department_id
				};
			},
			eyClosefun(){  // 关闭弹窗
				this.eyis = false;
				this.eymsg={
					name:'',
					id:''
				};
			}
		}
	}
</script>

<style>
	#member .infosearch-input .el-input__inner{
		background-color: #FFF6F1;
		height:36px;
		line-height: 36px;
	}
	#member .infosearch-input .el-input__inner:focus,
	#member .replaceisselect .el-input__inner:focus{
		border-color:#FF5E03;
	}
	#member .replaceisselect .el-input--small .el-input__inner{
		background-color: #F6F6F6;
		height:50px;
		line-height:50px;
	}
	#member .eyeach .el-input__inner{
		height: 40px;
		line-height: 40px;
		border: none;
	}
</style>
<style scoped lang="scss">
	.information {
		position: relative;
		width: 180px;
		padding: 0 10px;
		height: 98vh;
		overflow-y: auto;
		border-right: 1px solid #EBEBEB;
	}
	.topfixed{
		position:sticky;
		z-index: 100;
		top: 0;
		left: 0;
		width:200px;
		background-color: #fff;
	}
	// 搜索
	.infosearch {
		position: fixed;
		top: 0;
		z-index: 100;
		width: 180px;
		height:44px;
		background-color: #fff;

		.infosearch-input {
			width: 140px;
			height: 38px;
			border: none;
			margin-top: 5px;
		}
		.infosearch-add {
			position:absolute;
			top:8px;
			right: 0;
			width: 32px;
			height: 32px;
		}
	}

	// 消息列表
	.infoblock {
		padding-top: 40px;
		margin-top: 20px;

		.infoeach {
			width: 170px;
			padding: 5px;
			margin-bottom: 20px;
			border-radius: 10px;

			.infoeachl {
				position: relative;
				width: 39px;
				height: 39px;

				.infoeachl-p {
					width:40px;
					height:40px;
					border-radius: 5px;
				}
			}

			.infoeachr {
				min-width: 90px;
				margin-left: 10px;

				.infoeachr-name {
					line-height: 24px;
					font-size: 14px;
					color: #333333;
				}

				.infoeachr-msg {
					line-height:16px;
					font-size: 12px;
					color: var(--mainColor);
				}
			}

			.infoeachtime {
				color: #999999;
				font-size: 12px;
				margin-top: 30px;
			}
		}

		.activeinfoeach {
			background-color: var(--mainColor);

			.infoeachr {
				.infoeachr-name {
					color: #fff;
				}

				.infoeachr-msg {
					color: #fff !important;
				}
			}
		}
	}
	// 右部信息部分
	.rblock{
		position: relative;
		flex: 1;
		z-index: 99;
		background-color:#F7F7F7;
	}
	.ointrtitle{
		width:96%;
		padding:0px 2% 10px;
		height:40px;
		line-height: 40px;
		border-bottom: 1px solid #EEEEEE;
		color:#333333;
		font-size:14px;
		font-weight: bold;
		background-color: #fff;
	}
	.depart{
		width:98%;
		margin:10px auto;
		min-height:612px;
		border-radius:10px;
		background-color: #fff;
	}
	//部门人员信息
	.departmsg{
		width: 300px;
		height: 360px;
		// margin:90px 0 0 40px;
		border-radius: 10px;
		background-color: var(--bgColor);
		.departmsgt{
			border-bottom: 2px solid #fff;
			padding:40px 0 30px;
			.departmsgt-head{
				width: 80px;
				height: 80px;
				border-radius: 10px;
				margin-left: 30px;
			}
			.departmsgt-msg{
				margin-left:12px;
				.departmsgt-msgname{
					line-height: 40px;
					color: #333333;
					font-size: 20px;
					font-weight: bold;
					margin-top:5px;
				}
				.departmsgt-msgposi{
					display:inline-block;
					border-radius:5px;
					font-size: 14px;
					margin-top:5px;
				}
			}
		}
		.departmsgc{
			border-bottom: 2px solid #fff;
			padding:15px 0;
			justify-content: space-between;
			.departmsgc-each{
				width: 50%;
				text-align: center;
				font-size:14px;
			}
		}
		.departmsgb{
			.departmsgb-bm{
				width: 80%;
				margin:20px auto 0;
				.departmsgb-bmeach{
					padding-bottom: 20px;
					font-weight: bold;
					font-size:14px;
					color: #333333;
				}
			}
			.departmsgb-btn{
				width:80%;
				justify-content: space-between;
				.departmsgb-btneach{
					width:100%;
					height: 40px;
					border-radius:8px;
					background-color: #fff;
					color: #999999;
					border: 1px solid #999999;
				}
			}
		}
	}
	// 弹窗
	.replacebtn{
		margin-top: 30px;
		display: flex;
		justify-content:flex-end;
		.replacebtneach{
			width:130px;
			height: 50px;
			border-radius: 10px;
			color: #fff;
			font-size:16px;
			margin-left: 25px;
		}
	}
	.eyeach{
		justify-content:space-between;
		padding:10px 0;
		.eyeachtitle{
			line-height: 40px;
			color:#333333;
			font-size: 14px;
		}
		.eyeachr{
			width:75%;
		}
	}
</style>